import React,{Component} from "react";
import Input from '../components/Input'
// import {createForm} from 'rc-form'
import createForm from '../components/MyRcForm'

const nameRules = {required:true,message:"请输入姓名！"}
const passwordRules = {required:true,message:"请输入密码！"}
// react原始实现
/*
export default class MyRcForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username:'',
            password:''
        }
    }
    submit = ()=>{
        console.log(this.state)
    }
    render() {
        const {username,password} = this.state
        return <div>
            <Input value={username} onChange={e=>this.setState({username:e.target.value})} placeholder={'请输入用户名'}/>
            <Input value={password} onChange={e=>this.setState({password:e.target.value})} type={'password'} placeholder={'请输入用户名'}/>
            <button onClick={this.submit}>提交</button>
        </div>
    }
}
*/

// rc-form 写法，缺点：任何一个组件有改变则整个组件都重新渲染
@createForm
class MyRcForm extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const {setFieldsValue} = this.props.form
        setFieldsValue({
            username:'default'
        })
    }

    submit = ()=>{
        const {getFieldsValue} = this.props.form
        console.log(getFieldsValue())
        console.log(this.props.form)
    }
    render() {
        console.log('~~MyRcForm',this.props.form)
        const {getFieldDecorator} = this.props.form
        return <div>
            {getFieldDecorator('username', {rules: [nameRules]})(<Input placeholder={'请输入用户名'}/>)}
            {getFieldDecorator('password', {rules: [passwordRules]})(<Input type={'password'} placeholder={'请输入用户名'}/>)}
            <button onClick={this.submit}>提交</button>
        </div>
    }
}
export default MyRcForm